<template>
    <div class="invoice-info">
        <el-page-header @back="goBack" content="管理发票信息"></el-page-header>

        <div class="title">{{title}}</div>

        <div>
            <el-form ref="invoiceInfo" :model="invoiceInfo" label-width="120px" :rules="rules">
                <el-form-item label="发票类型：">
                    <el-radio-group v-model="invoiceInfo.invoiceType">
                        <el-radio label="增值税普通发票">增值税普通发票</el-radio>
                        <el-radio label="增值税专用发票">增值税专用发票</el-radio>
                        <el-radio label="组织（非企业）增值税普通发票">组织（非企业）增值税普通发票</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="抬头类型：" class="input-width">
                    <el-radio-group v-model="invoiceInfo.makeInvoice">
                        <el-radio :label="1">个人</el-radio>
                        <el-radio :label="2">企业</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="发票抬头：" class="input-width" v-if="invoiceInfo.makeInvoice==1">
                    <el-input v-model="invoiceInfo.invoiceTitle" placeholder="请输入发票抬头"></el-input>
                </el-form-item>


                <el-form-item label="公司名称：" class="input-width" v-if="invoiceInfo.makeInvoice!=1" prop="invoiceTitle">
                    <el-input v-model="invoiceInfo.invoiceTitle" placeholder="请输入公司名称"></el-input>
                </el-form-item>

                <el-form-item label="公司税号：" class="input-width" v-if="invoiceInfo.makeInvoice!=1" prop="taxNum">
                    <el-input v-model="invoiceInfo.taxNum" placeholder="请输入公司对应的税号"></el-input>
                </el-form-item>

                <div v-if="invoiceInfo.makeInvoice!=1" class="unfold" @click="unfoldFlag=!unfoldFlag">
                    {{unfoldFlag?'展开显示非必填':'收起非必填'}}
                </div>

                <div v-if="!unfoldFlag&&invoiceInfo.makeInvoice!=1">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="地 址：">
                                <el-input v-model="invoiceInfo.place" placeholder="请输入地址"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="开 户 行：">
                                <el-input v-model="invoiceInfo.bankName" placeholder="请输入开户行"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="电 话：" prop="fixedLineTelephone" >
                                <el-input v-model="invoiceInfo.fixedLineTelephone" placeholder="请输入电话"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="开户行账号：" prop="bankNum">
                                <el-input v-model="invoiceInfo.bankNum" placeholder="请输入开户行账号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>

        <div class="save-info">
            <div>
                <div>
                    <el-checkbox v-model="invoiceInfo.status">设为默认抬头</el-checkbox>
                    <div class="tip">每次开票会默认填写该抬头信息</div>
                </div>
                <div style="margin-top: 20px">
                    <el-button size="mini" type="primary" style="width: 80px" @click="saveInvoiceInfo()">保存</el-button>
                    <el-button size="mini" type="info" style="width: 80px" @click="handleCancel">取消</el-button>
                </div>
            </div>
        </div>

        <div class="show-info">已保存了<span style="color: red;margin: 0px 5px">{{invoiceInfoData.length}}条</span>发票信息</div>

        <div class="margin-top20">
            <el-table :data="invoiceInfoData" border style="width: 100%">
                <el-table-column align="center" prop="invoiceType" label="发票类型" width="180"></el-table-column>
                <el-table-column align="center" label="抬头类型" width="180">
                    <template slot-scope="scope">
                        {{scope.row.makeInvoice==1?'个人':'企业'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="invoiceTitle" label="公司名称"></el-table-column>
                <el-table-column align="center" prop="taxNum" label="公司税号"></el-table-column>
                <el-table-column align="center" fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" style="color: #2196F3" @click="modification(scope.row)">修改
                        </el-button>
                        <el-button type="text" size="small" style="color: #ff0000" @click="showDeleteDialog(scope.row)">删除
                        </el-button>
                        <el-button type="info" size="small" style="color: #666666" v-if="scope.row.status==1">默认抬头
                        </el-button>
                        <el-button type="primary" size="mini" @click="setDefault(scope.row)" v-if="scope.row.status!=1">
                            设为默认
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <!--        dialog-->
        <!--        删除提示弹窗-->
        <el-dialog :visible.sync="deleteDialogVisible" width="300px" center :modal="false" top="40vh">
            <div align="center"><span>确定删除此项设置吗？</span></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="deleteDialogVisible = false,deleteInvoinceInfo()">确 定</el-button>
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script src="./invoice.info.js"></script>
<style lang="scss" src="./invoice.info.scss"></style>
